<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>尚元</title>
    	<meta name="viewport" content="width=device-width,minimum-scale=1,maximum-scale=1,initial-scale=1"/>
    	<style type="text/css">
    		body{
    			background-color: #fff;
    		}
    		body,p{
    			margin:0;
    		}
    		ul,li{
    			margin:0;
    			padding:0;
    			list-style: none;
    		}
			@font-face {font-family: "iconfont";
			  src: url('iconfont.eot?t=1550654674428'); /* IE9 */
			  src: url('iconfont.eot?t=1550654674428#iefix') format('embedded-opentype'), /* IE6-IE8 */
			  url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAOMAAsAAAAAB8gAAAM+AAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDBgqDLIJnATYCJAMMCwgABCAFhG0HORuwBhHVm63IfiaYJ9k7Vq4ZvzzI4k9JY4KA7Pyfvb3kAcQHhNqozC4BkAAB4otzHtioCDWSsyePvpCWB1lO/3M5vbu22PyW5TTH8KNegHFAgY45OZECCchTGF4d8m6thwAMcRVMZOcWV6OPitVNAGJgvz4d6OcMqA3lAn0EWjBWRSxFg74yT7kBLAm/Lz4RmT4oaCRW3/LenG7S31a+fSin6qbS7CMIp7MBwiSQQDBQQbRCRz0yTgSTGGoKtTlfi4pAmSqs0xEKdJV2o388BYQWq9QYAH+aVOBtpcuBgLcPL0ABQAKgBfSBGcBmSrL2STTm7GNsHIwNmnbvdxQbDviZ7drnINbu9R68cr6tWD3Nrs+aBTZi1VTr7hQVaI9M4AMnmM+/iLr2YYzFniNumh2Xx1osOGWzqV7pXT3furrWe2t307Qr48xX77cVfXpWGS1YZbdmmm1tXQ9TV1qv3Nl45r7b5nuxJ+84b7pbt+vS1IvzL0+7crgsfL1Erg/fHracbPrF9wuvfF+Wlb3kabdW6F4BHKWlr+jjXpL0z2S8Lni2q0H28AnlS0zm6L+OOeoXpReYZoLibyJrLGta28+dCxYNCBD/PX2itv9LqHhu0xWfmJhcY6Dp6wHnHTq5vMLZ0lcp653Xf+uFqxdNjC9dvXrB1F80+PidOSlzU8amjKEdAJ1OTpUiTB2R/5XfP+s3XN+4/EubWfIffSMVgCcrUu7RDrojKlIA+rfiFPBrhB2rVF0Nq1RVgSsw05IqNDfOozxRyQ+pBLD0arjKpnMpCPSxSUFBDxeQ6OONqqRg0GBENGjRJw0MCZI32Qgrw5EI1QAINIuAwNwRUDDlCkjM3URV0kvQYOsLaDFPgiG1wmpOI3wz+x2yCAWjBvkHr/rOOGY+ROU3tO8kKCsO6S+kyYehLqpi+ood0hQDpo9tmA0Y6jNcyGaYUg8D9QEVF455aMvSoBcVqs+zw+xIKBg1yD941XfGr8+H0udvaN9JUAOuxv1CmnzzUBdVB/Sq6DrhbuWS6WMbZgOG+gwXYsNkJ3oYcKuAigs3IDa0JVPLdFUUy6vy+20ADGdWXzlXhBQqG0J+U7fx8gYvutkMAAA=') format('woff2'),
			  url('iconfont.woff?t=1550654674428') format('woff'),
			  url('iconfont.ttf?t=1550654674428') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
			  url('iconfont.svg?t=1550654674428#iconfont') format('svg'); /* iOS 4.1- */
			}
			.iconfont {
			  font-family: "iconfont" !important;
			  font-size: 16px;
			  font-style: normal;
			  -webkit-font-smoothing: antialiased;
			  -moz-osx-font-smoothing: grayscale;
			}
			.icon-return:before {
			  content: "\e652";
			}
			
			.icon-tupian:before {
			  content: "\e6d5";
			}
			.nav{
				height: 50px;
				border-bottom: 1px solid #f2f2f2;
				position: relative;
				background-color: #fff;
			}
			.nav i{
				font-size: 24px;
				position: absolute;
				top:0;
				left: 0;
				height: 50px;
				padding:0 10px;
				line-height: 50px;
				color: #283340;
			}
			.nav p{
				font-size: 20px;
				color: #283340;
				text-align: center;
				line-height: 50px;
			}
			.footer{
				height: 46px;
				background-color: #f0f0f0;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding:0 16px;
			}
			
			.content{
				height: calc(100vh - 97px);
				overflow: scroll;
				background-color: #fff;
			}
			.content ul{
				padding:20px 2vw;
			}
			.content ul li{
				margin-bottom: 10px;
				display: flex;
				align-items: flex-start;
			}
			.content ul li p{
				width: 100%;
				color: #cacaca;
				font-size: 12px;
				text-align: center;
			}
			.content ul li .img{
				width: 40vw;
				height:auto;
				background-color: #f0f0f0;
				border-radius: 6px;
			}
			.content ul li.left img.head{
				width:14vw;
				height: 14vw;
				border-radius: 50%;
				margin-right: 2vw;
			}
			.content ul li.left span{
				padding:10px;
				background-color: #f0f0f0;
				max-width: 62vw;
				box-sizing: border-box;
				border-top-left-radius: 14px;
				border-top-right-radius: 14px;
				border-bottom-right-radius:14px;
				border-bottom-left-radius:0;
			}
			.content ul li.right{
				justify-content: flex-end;
			}
			.content ul li.right img.head{
				width:14vw;
				height: 14vw;
				border-radius: 50%;
				margin-left: 2vw;
			}
			.content ul li.right span{
				padding:10px;
				background-color: #c99f74;
				max-width: 62vw;
				box-sizing: border-box;
				border-top-left-radius: 14px;
				border-top-right-radius: 14px;
				border-bottom-left-radius:14px;
				border-bottom-right-radius:0;
			}
			#input{
				width: 66vw;
				height: 28px;
				background-color: #fff;
				border:none;
				border-radius: 4px;
				padding-left: 6px;
				box-sizing: border-box;
			}
			.footer i{
				font-size: 28px;
				color: #666;
				height: 28px;
				line-height: 28px;
			}
			#send{
				background-color: #c99f74;
				color: #fff;
				border:none;
				height: 24px;
				padding:0 4px;
				border-radius: 4px;
			}
    	</style>
	</head>
	<body>
		<header class="nav">
			<i class="iconfont icon-return"></i>
			<p>孙尚香</p>
		</header>
		<main class="content">
			<ul id="ul">
				<li>
					<p>15:15 pm</p>
				</li>
				<li class="left">
					<img src="img/head1.png" alt="头像" class="head" />
					<span>您好！有什么可以帮到您的？</span>
				</li>
				<li class="right">
					<span>您好！有什么可以帮到您的？</span>
					<img src="img/head2.png" alt="头像" class="head" />
				</li>
				<li class="right">
					<span>您好！有什么可以帮到您的？</span>
					<img src="img/head2.png" alt="头像" class="head" />
				</li>
				<li class="right">
					<span>您好！有什么可以帮到您的？</span>
					<img src="img/head2.png" alt="头像" class="head" />
				</li>
				<li class="right">
					<span>您好！有什么可以帮到您的？</span>
					<img src="img/head2.png" alt="头像" class="head" />
				</li>
				<li class="right">
					<span>您好！有什么可以帮到您的？</span>
					<img src="img/head2.png" alt="头像" class="head" />
				</li>
				<li class="right">
					<span>您好！有什么可以帮到您的？</span>
					<img src="img/head2.png" alt="头像" class="head" />
				</li>
				<li class="right">
					<span>您好！有什么可以帮到您的？</span>
					<img src="img/head2.png" alt="头像" class="head" />
				</li>
				<li class="right">
					<span>您好！有什么可以帮到您的？</span>
					<img src="img/head2.png" alt="头像" class="head" />
				</li>
				<li class="right">
					<span>您好！有什么可以帮到您的？</span>
					<img src="img/head2.png" alt="头像" class="head" />
				</li>
				<li class="right">
					<span>您好！有什么可以帮到您的？</span>
					<img src="img/head2.png" alt="头像" class="head" />
				</li>
				<li class="left">
					<img src="img/head1.png" alt="头像" class="head" />
					<img src="img/head1.png" class="img" />
				</li>
				<li class="right">
					<img src="img/head1.png" class="img" />
					<img src="img/head2.png" alt="头像" class="head" />
				</li>
				<li class="right">
					<span>您好！有什么可以帮到您的？</span>
					<img src="img/head2.png" alt="头像" class="head" />
				</li>
				<!--<li class="right">
					<img src="img/head1.png" class="img" />
					<img src="img/head2.png" alt="头像" class="head" />
				</li>-->
			</ul>
		</main>
		<footer class="footer">
			<input type="text" id="input" placeholder="请输入"/>
			<i class="iconfont icon-tupian" id="imgbtn"></i>
			<button id="send">发送</button>
		</footer>
		<input type="file" accept="image/*" multiple id="uploadInput" style="display: none;" />
	</body>
	<script src="js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/iscroll.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/exif.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/upload.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		var myScroll = null;
		var maxScrollY = 0;
		$("#imgbtn").click(function(){
			$("#uploadInput").click();
		})
		$("#uploadInput").on("change", function(e){
			var readerFiles = e.target.files[0];
			comImage(readerFiles, function(dat) {
				
//				var img = convertImgDataToBlob(dat);
//				var formData = new FormData();
//				formData.append("image", img, "file_" + Date.parse(new Date()) + ".png");
				
			});
		});
		
		$("#send").click(function(){
			var val = $.trim($("#input").val());
			if(!val){ console.log("不能为空"); return; }
			var html = '';
			html +='<li class="right">';
			html +='	<span>'+val+'</span>';
			html +='	<img src="img/head2.png" alt="头像" class="head" />';
			html +='</li>';
			$("#input").val('');
			$("#ul").append(html);
			myScroll.refresh();
			maxScrollY = myScroll.maxScrollY;
			if(!maxScrollY==0){
				myScroll.scrollTo(0, maxScrollY, 500);
			}
		})
		
		var _judge = true;		
		window.onload = function(){
			myScroll = new IScroll(".content");
			maxScrollY = myScroll.maxScrollY;
			myScroll.on('scrollEnd', function () {
			    if ( this.y == 0 ) {
			        // do something
			    }
			});	
		}
		
	</script>
	<script type="text/javascript">
		function resetImg(path, callback) {
			var img = new Image();
			img.onload = function() {
				EXIF.getData(img, function() {
					var Orientation = EXIF.getTag(this, 'Orientation');
					setTimeout(function() {
						if(Orientation != "" && Orientation != 1 && Orientation) {
							switch(Orientation) {
								case 6: //需要顺时针（向左）90度旋转  
									rotateImgNew(img, 'left', callback);
									break;
								case 8: //需要逆时针（向右）90度旋转  
									rotateImgNew(img, 'right', callback);
									break;
								case 3: //需要180度旋转  
									var _this = img;
									rotateImgNew(img, 'right', function() {
										rotateImgNew(_this, 'right', callback);
									}); //转两次 
									break;
							}
						} else {
							callback(path)
						}
					}, 1000);
				});
			}
			img.src = path;
		}
		
		function rotateImgNew(img, direction, callback) {
			var canvas = document.createElement("canvas");
			//最小与最大旋转方向，图片旋转4次后回到原方向    
			var min_step = 0;
			var max_step = 3;
			if(img == null) return;
			//img的高度和宽度不能在img元素隐藏后获取，否则会出错    
			var height = img.height;
			var width = img.width;
			var step = 2;
			if(step == null) {
				step = min_step;
			}
			if(direction == 'right') {
				step++;
				//旋转到原位置，即超过最大值    
				step > max_step && (step = min_step);
			} else {
				step--;
				step < min_step && (step = max_step);
			}
			//旋转角度以弧度值为参数    
			var degree = step * 90 * Math.PI / 180;
			var ctx = canvas.getContext('2d');
			switch(step) {
				case 0:
					canvas.width = width;
					canvas.height = height;
					ctx.drawImage(img, 0, 0);
					break;
				case 1:
					canvas.width = height;
					canvas.height = width;
					ctx.rotate(degree);
					ctx.drawImage(img, 0, -height);
					break;
				case 2:
					canvas.width = width;
					canvas.height = height;
					ctx.rotate(degree);
					ctx.drawImage(img, -width, -height);
					break;
				case 3:
					canvas.width = height;
					canvas.height = width;
					ctx.rotate(degree);
					ctx.drawImage(img, -width, 0);
					break;
			}
			dat = canvas.toDataURL("image/jpeg", 0.1);
			callback(dat)
		};
		
		function comImage(tdomImg, fn) {
			var fr = new FileReader();
			fr.onload = function(e) {
				var timgdata = e.target.result;
				resetImg(timgdata, function(domImg) {
					var img = new Image();
					img.onload = function() {
						var w0 = img.width;
						var h0 = img.height;
						var maxW = 1200;
						var maxH = 1000;
						if(maxW < w0 && maxH < h0) {
							var bl = (maxW / w0) < (maxH / h0) ? maxW / w0 : maxH / h0;
							var tcan = document.createElement('canvas');
							tcan.width = w0 * bl;
							tcan.height = h0 * bl;
							tctx = tcan.getContext('2d');
							tctx.drawImage(img, 0, 0, img.width, img.height, 0, 0, tcan.width, tcan.height);
							fn(tcan.toDataURL("image/jpeg"))
						} else {
							fn(timgdata)
						}
					}
					img.src = domImg;
				});
			}
			fr.readAsDataURL(tdomImg);
		}
		function convertImgDataToBlob(base64Data) {
			var format = "image/jpeg";
			var base64 = base64Data;
			var code = window.atob(base64.split(",")[1]);
			var aBuffer = new window.ArrayBuffer(code.length);
			var uBuffer = new window.Uint8Array(aBuffer);
			for(var i = 0; i < code.length; i++) {
				uBuffer[i] = code.charCodeAt(i) & 0xff;
			}
			var blob = null;
			try {
				blob = new Blob([uBuffer], {
					type: format
				});
			} catch(e) {
				window.BlobBuilder = window.BlobBuilder ||
					window.WebKitBlobBuilder ||
					window.MozBlobBuilder ||
					window.MSBlobBuilder;
				if(e.name == 'TypeError' && window.BlobBuilder) {
					var bb = new window.BlobBuilder();
					bb.append(uBuffer.buffer);
					blob = bb.getBlob("image/jpeg");
		
				} else if(e.name == "InvalidStateError") {
					blob = new Blob([aBuffer], {
						type: format
					});
				} else {
		
				}
			}
			return blob;
		};
	</script>
</html>
